<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>云原生数据库 TeleDB for HTAP</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          TeleDB for HTAP是既支持在线事务处理 (OLTP) 又支持在线分析处理 (OLAP)
          的融合型云原生分布式数据库，具有兼容MySQL协议、高性能、实时分析的特点，适用于数据规模大、高可用、高吞吐等业务场景。
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div class="flex-grid mt-20">
          <div class="list-box" v-for="(item, index) in list" :key="index">
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <div class="scene-list2">
          <div class="list" v-for="(item, index) in sceneList" :key="index">
            <span class="icon"><img :src="item.iconUrl" alt="" /></span>
            <dl>
              <dt>{{ item.name }}</dt>
              <dd>{{ item.label }}</dd>
            </dl>
          </div>
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="framework-img mt-20 bor">
          <img :src="frameworkImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav5',
  data () {
    return {
      list: [
        {
          name: '兼容MySQL协议和生态',
          label:
            '兼容MySQL 5.7协议和MySQL生态工具，方便利用MySQL丰富的周边工具链和成熟的技术方案。'
        },
        {
          name: '高可用',
          label:
            '支持灵活的部署方式，并保证机器网络故障情况下的数据安全和服务连续可用。'
        },
        {
          name: '弹性伸缩',
          label:
            '可根据负载实时动态调度结点和数据，方便地实现热点打散、负载均衡、弹性扩缩容、系统升级等集群运维管理功能。'
        },
        {
          name: '实时HTAP',
          label:
            '提供一站式OLTP和OLAP服务，通过实时同步、向量化执行等优化技术，实时高效处理TP、AP混合负载。'
        },
        {
          name: '云原生支持',
          label:
            '基于容器化技术构建完整的数据库技术栈，满足企业对于大规模应用、高容错性、易管理、弹性伸缩的需求。'
        }
      ],
      sceneList: [
        {
          iconUrl: require('../../assets/images/icon/ico-r3-001.png'),
          name: '高可用场景',
          label:
            '满足对数据可靠性及一致性的较高要求，提供了企业级的容灾特性，保证在各种网络机器故障情况下的数据安全和服务高可用。'
        },
        {
          iconUrl: require('../../assets/images/icon/ico-r3-002.png'),
          name: '海量数据和高并发场景',
          label:
            '支持海量数据的导入导出、快速读写，支持高吞吐和动态调度，方便地进行横向伸缩和集群运维管理。'
        },
        {
          iconUrl: require('../../assets/images/icon/ico-r3-003.png'),
          name: 'HTAP混合负载场景',
          label:
            '一个系统同时高效处理联机事务和在线分析，避免繁琐ETL过程，提高在线分析服务的时效性，降低整体成本。'
        }
      ],
      frameworkImg: require('../../assets/images/pic/img-5.png')
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.list-box {
}
</style>
